
<template>
  <div class="set">
    <!-- 员工添加 -->
    <div class="add_Mployee">
      <div>
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="80"></el-avatar>
      </div>
      <div>
        等级:
        <el-select v-model="Index" placeholder="请选择" class="size">
          <el-option v-for="(item,index) in options" :key="item" :label="item" :value="index">
          </el-option>
        </el-select>
      </div>
      <div>
        职位:
        <el-select v-model="post" placeholder="请选择" class="size">
          <el-option v-for="(item,index) in posts[Index]" :key="index" :label="item" :value="item">
          </el-option>
        </el-select>
      </div>
      <div>
        账号:
        <el-input v-model="user" placeholder="请输入账号" class="size"></el-input>
      </div>
      <div>
        密码:
        <el-input v-model="pass" placeholder="请输入密码" class="size"></el-input>
      </div>
      <div class="btn">
        <el-button type="primary" class='btnsize' @click='adduser()'>添加</el-button>
        <el-button class='btnsize' @click = "empty()">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //部门选项
        options: ['A', 'B', 'C'],
        posts:[
          ["老板"],
          ["班主任"],
          ["就业老师","java讲师","前端讲师","测试讲师"]
        ],
        //职位
        post: '',
        //账号
        user: '',
        //密码
        pass: '',
        Index:''
      }
    },
    methods: {
      getIndex(i){
        this.Index = i;
        console.log(this.Index);
        console.log('21111');
      },
      adduser(){
        this.mysqlser.post("/adduser",{
          accounts:this.user,
          password:this.pass,
          level:this.options[this.Index],
          job:this.post
        }).then((res)=>{
          console.log(res);
        });
        //清空输入框
         this.grade = '',
         this.post = '',
         this.user = '',
         this.pass = ''
      },
      //点击取消清空输入框
     empty(){
      //清空输入框
       this.grade = '',
       this.post = '',
       this.user = '',
       this.pass = ''
     }
    }

  }
</script>

<style scoped="scoped">
  .set {
    width: 100%;
    background-color: #B3D8FF;
  }

  .add_Mployee {
    width: 500px;
    height: 630px;
    box-shadow: 5px 0px 5px #ccc, -5px 0px 5px #ccc;
    border: 3px solid #ccc;
    margin: 0 auto;
    background-color: #fff;
  }

  .add_Mployee div {
    margin-top: 15px;
  }

  .size {
    width: 300px;
  }

  .btnsize {
    width: 150px;
    margin-left: 15px;
  }
</style>
